<template>
    <div class="barChartBox" :id="id"></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: "funChart",
    props:{
        isComplete:{
            type:String
        },
        id:{
            type:String
        },
        now:{
           default:''
        },
        suggest:{
            type:Number
        },
        max:{
            type:Number
        }
    },

    methods:{
        callRight(){
            let nowLength=0,suggestLength=0
            if(this.now){
                nowLength=(this.now+'').length
            }
            if(this.suggest){
                suggestLength=(this.suggest+'').length
            }

            return (suggestLength>nowLength?suggestLength*8:nowLength*8)+15
        },
        getOption(){

            let series=[],right=this.callRight()
            if(this.now||this.now==0&&this.$route.query.isComplete=='yes'){
                series.push({
                    type: 'bar',
                    itemStyle:{
                        barBorderRadius:100,
                        color:'#DEECFC'
                    },
                    barWidth:'8%',
                    barGap:1.5,
                    label:{
                        show:true,
                        position:'right',
                        color:'#545861'
                    },
                    data: [this.now]
                })
            }
            if(this.suggest||this.suggest==0){
                series.push({
                    type: 'bar',
                    itemStyle:{
                        barBorderRadius:100,
                        color:'#5BA0F0'
                    },
                    barWidth:'8%',
                    barGap:1.5,
                    label:{
                        show:true,
                        position:'right',
                        color:'#545861',
                        width:'20'
                    },
                    data: [this.suggest]
                })
            }
            //console.log(series)
            let option = {
                xAxis: {
                    type: 'value',
                    show:false,
                    max:this.max
                },
                yAxis: {
                    type: 'category',
                    show:false,

                },
                grid:{
                    left:0,
                    right:right,
                },
                series:series
            };
            return option
        },
        showChart(){
            let myChart = echarts.init(document.getElementById(this.id));
            myChart.setOption(this.getOption())
            window.addEventListener("resize", () => {myChart.resize();});
        }
    },
    mounted(){
       this.showChart()
    }
};
</script>

<style scoped>

</style>
